<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="true"
		:auto="false" :hideEmptyView="false">
		<view slot="top">
			<z-nav-bar backState="1000">积分记录</z-nav-bar>
		</view>
		<view v-if="dataList.length > 0">
			<view class="u-m-t-20">
				<view class="u-text-right" @click="handlePointRule">
					<text class="rule">积分规则</text>
				</view>
			</view>
			
			<view class="u-p-30">
				<view class="u-m-t-10 u-text-center">
					<text class="u-font-36">当前积分</text>
				</view>
				<view class="u-m-t-10 u-text-center">
					<u-count-to :duration="countDuration" :startVal="0" :endVal="pointBalance" color="#FFB143" fontSize="30" bold decimals="0" separator=","></u-count-to>
				</view>
			</view>
			
			<view class="u-m-t-50">
				<view class="u-flex u-p-b-30 u-p-t-30 u-p-l-30 u-p-r-30 solid-bottom" v-for="(item, index) in dataList" :key="index">
					<view class="u-flex-8">
						<view class="u-line-1">
							<text class="u-font-36 text-bold">{{item.recordName}}</text>
						</view>
						<view class="u-flex u-m-t-20">
							<view class="u-flex-4">
								<text style="opacity: 0.5;">{{formatDate(item.createTime)}}</text>
							</view>
							<view class="u-flex-8 u-m-l-30 u-flex">
								<view class="tag ">
									{{item.statusName}}
								</view>
							</view>
						</view>
					</view>
					<template v-if="item.recordType != pointChangeSourceEnum.platform">
						<view class="u-flex-2 u-text-center text-orange u-font-36 text-bold">
							<text v-if="item.oper == operEnum.add">+</text>
							<text v-else>-</text>
							<text>{{item.point}}</text>
						</view>
						<view class="u-flex-2 u-text-right text-orange u-font-36 text-bold">
							<image :src="item.coverImage" style="width: 100rpx; height: 100rpx;"></image>
						</view>
					</template>
					<template v-else>
						<view class="u-flex-4 u-text-right text-orange u-font-36 text-bold">
							<text v-if="item.oper == operEnum.add">+</text>
							<text v-else>-</text>
							<text>{{item.point}}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
		
		<Rule ref="ruleDialog"></Rule>
		
	</z-paging>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {userPointChangePage} from '@/api/point.js'
	import dayjs from 'dayjs'
	import {operEnum, pointChangeSourceEnum} from '@/common/const.js'
	import Rule from '@/pages_one/components/rule/index.vue'
	
	export default{
		data(){
			return{
				countDuration:200,
				pointChangeSourceEnum,
				operEnum,
				dataList:[],
				requestParams:{}
			}
		},
		computed:{
			...mapGetters(['userInfo']),
			
			/**
			 * 积分余额
			 */
			pointBalance(){
				if(this.userInfo && this.userInfo.shopUserInfo){
					return this.userInfo.shopUserInfo.pointBalance
				}
				return 0
			},
		},
		onLoad() {
			this.init()
		},
		components:{
			Rule
		},
		methods:{
			/**
			 * 初始化
			 */
			init(){
				this.reload()
			},
			
			/**
			 * 重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			queryList(pageNo, pageSize){
				this.requestParams.current = pageNo
				this.requestParams.size = pageSize
				userPointChangePage(this.requestParams).then(res=>{
					if(pageNo == 1){
						this.dataList = []
					}
					let data = res.data.records
					data.forEach(item=>{
						if(item.recordImages){
							let images = item.recordImages.split(",")
							if(images.length > 0){
								// 获取sku封面
								if(!item.hasOwnProperty('coverImage')){
									this.$set(item, 'coverImage', images[0])
								} else {
									item.coverImage = images[0]
								}
							}
							
						}
					})
					
					
					this.dataList = this.dataList.concat(data);
					this.$refs.paging.complete(data);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false);
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			
			/**
			 * 格式化优惠券时间
			 */
			formatDate(val){
				return dayjs(val).format('YYYY.MM.DD')
			},
			
			/**
			 * 积分规则
			 */
			handlePointRule(){
				this.$nextTick(()=>{
					this.$refs.ruleDialog.init()
				})
			},
			
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style scoped>
	.rule{
		background-color: #000000;
		color: #FFFFFF;
		padding: 10rpx 20rpx 10rpx 30rpx;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		font-size: 22rpx;
	}
	
	.tag{
		background-color: #FFDBA8;
		padding: 2px 10px;
		color: #FFFFFF;
		border-radius: 0px 20px 20px 0px;
	}
</style>